<template>
  <van-cell
    class="article-item"
    :to="{ name: 'article', params: { articleId: item.art_id } }"
  >
  <div slot="title" class="title van-multi-ellipsis--l2">
    {{item.title}}
  </div>
  <!-- label插槽  多图-->
  <div slot="label" class="cover-list" v-if="item.cover.type == 3">
    <van-image
      v-for="(image, i) in item.cover.images"
      :key="i"
      :src="image"
      class="cover-item"
    />
  </div>
  <!-- label插槽  作者 评论  时间-->
  <div slot="label" class="info">
    <span>{{item.aut_name}}</span>
    <span>{{item.comm_count}} 评论</span>
    <span>{{item.pubdate | relativeTime}}</span>
  </div>
  <!-- default插值 单图 -->
  <van-image
    slot="default"
    v-if="item.cover.type == 1"
    :src="item.cover.images[0]"
    class="cover-img"
  />
  </van-cell>
</template>

<script>
export default {
  name: 'article-item',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
     .article-item {
        margin: 10px 0;
    padding-top: 20px;
    padding-bottom: 30px;
    &::after {
        width: 100%;
        left: 0;
    }
    ::v-deep .van-cell__title {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    ::v-deep .van-cell__value {
      flex: unset;
      width: 232px;
      height: 146px;
      margin-left: 26px;
    }
    .title {
      font-size: 32px;
      color: #3A3A3A;
    }
    .cover-list {
      display: flex;
      margin: 30px 0;
      .cover-item {
        flex: 1;
        height: 146px;
        margin-right: 4px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .info {
      span {
        margin: 0 6px;
        color: #B4B4B4;
        font-size: 23px;
      }
    }
    .cover-img {
      width: 232px;
      height: 146px;
    }
  }
</style>
